@import 'bourbon'; // http://bourbon.io/

@import '../partials/variables'; // colors, fonts etc...

@import '../partials/mixins'; // custom mixins

@import '../partials/layout'; // responsive grid and media queries

/* -------------------------------- 

Primary style

-------------------------------- */

html * {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
	@include box-sizing(border-box);
}

body {
	font: {
		size: 100%;
		family: $primary-font; // variables inside partials > _variables.scss
	}
	color: $main-text;
	background-color: $background;
}

a {
	color: $link;
	text-decoration: none;
}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */

.cd-container {
  width: 90%;
  max-width: $M; // breakpoints inside partials > _layout.scss
  margin: 2em auto;

  &::after { /* clearfix */
    content: '';
    display: table;
    clear: both;
  }
}

/* -------------------------------- 

Main components 

-------------------------------- */

header {
	background: darken($background, 10%);
	height: 100px;
	text-align: center;

	h1 {
		@include font-size(20px);
		font-weight: bold;
		font-family: $secondary-font;
		text-transform: uppercase;
		font-weight: bold;
		padding-top: 1.6em;
		margin-bottom: .2em;
	}

	p {
		@include font-size(13px);
		color: lighten($background, 10%);
	}

	@include MQ(L) {
		height: 200px;

		h1 {
			@include font-size(30px);
			padding-top: 2.6em;
		}
	}
}

main {
	p {
		@include font-size(16px);
		line-height: 1.6;
		margin: 2em 0;
	}

	@include MQ(L) {
		p {
			@include font-size(20px);
		}
	}
}

.cd-top {
	display: inline-block;
	height: 40px;
	width: 40px;

	position: fixed;
	bottom: 40px;
	right: 10px;

	box-shadow: 0 0 10px rgba(#000, .05);

	/* image replacement properties */
	overflow: hidden; 
	text-indent: 100%;
	white-space: nowrap;

	background: rgba($link, .8) url(../img/cd-top-arrow.svg) no-repeat center 50%;

	visibility: hidden;
	opacity: 0;

	-webkit-transition: opacity .3s 0s, visibility 0s .3s;
	-moz-transition: opacity .3s 0s, visibility 0s .3s;
	transition: opacity .3s 0s, visibility 0s .3s;

	&.cd-is-visible, &.cd-fade-out, .no-touch &:hover {
		-webkit-transition: opacity .3s 0s, visibility 0s 0s;
		-moz-transition: opacity .3s 0s, visibility 0s 0s;
		transition: opacity .3s 0s, visibility 0s 0s;
	}

	&.cd-is-visible { /* the button becomes visible */
		visibility: visible;
		opacity: 1;
	}

	&.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
		opacity: .5;
	}

	.no-touch &:hover {
		background-color: rgba($link, 1);
		opacity: 1;
	}

	@include MQ(M) {
		right: 20px;
		bottom: 20px;
	}

	@include MQ(L) {
		height: 60px;
		width: 60px;
		right: 30px;
		bottom: 30px;
	}
}